<template>
	<view class="container" :style="{ paddingTop: topHeight }">
		<view class="header">
			<view class="dis-flex flex-y-center">
				<u-icon name="arrow-left" color="#252525" size="22" @click="back"></u-icon>
				<view class="book flex-box">官宣书</view>
				<view class="buquan" @click="toJump('/pages/love/completion?type='+type)">补全</view>
			</view>
		</view>
		<view class="wrap">
			<view class="imgwrap">
				<image class="imgicon" :src="title" mode="widthFix" />
			</view>
		</view>
		<view class="boxWrap dis-flex flex-y-center" style="height: 100px;" v-for="item in list" :key="item.id">
			<image v-if="item.love.avatar" class="avatar" :src="IMG_URL + item.love.avatar" 
				style="border-radius:50% ;" />
			<image v-else class="avatar" src="/static/imgs/tou.png" mode="widthFix" />
			<view class="nameWrap flex-box"
				@click="toJump('/pages/love/past?ship_id=' + JSON.stringify(item) + '&type=' + type)">
				<text class="vague">{{ item.love.username.charAt(0) }}</text>
				<text>{{ item.love.username.substring(1) }}</text>
				<!-- <text>{{ item. }}</text> -->
			</view>
			<view class="codes">
				<view class="dis-flex flex-y-center flex-x-end" style=" 30px">
					<image v-if="item.completion == 1" class="imgicon_1" src="/static/imgs/bu.png" mode="widthFix" />
					<image class="imgicon_1" src="/static/imgs/folder.png" mode="widthFix" />
					<image class="imgicon_1" src="/static/imgs/dot.png" mode="widthFix" @click="more(item)" />
				</view>
				<view class="nums">官宣书登记字号：{{ item.registration_number }}</view>
			</view>
		</view>
		<Lock :address='isLock' @changeClose="() => isLock = false" :isNow="isNow" :shipid="ship.id"
			:messageType="messageType" :userid="ship.love.id"></Lock>
	</view>
</template>

<script>
import { loveHistory } from '@/api/love.js'
import {
	IMG_URL,
} from "../../config/app.js";
import Lock from '@/components/lock'
import { codeLogin } from '../../api/login.js';
export default {
	name: 'love_history', // 恋爱史
	components: {
		Lock
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			isLock: false,
			list: [],
			ship: {
				love: {
					id: 0
				}
			},
			isNow: false,
			title: '',
			type: '',
			messageType: '',
		}
	},
	onLoad(option) {
		console.log(option, '过来了');
		this.type = option.type
		if (option.type == 1) {
			this.title = '/static/imgs/love_logo.png'
			this.messageType = 'lovestate'
		}
		if (option.type == 2) {
			this.title = '/static/imgs/guimi.png'
			this.messageType = 'bestiestate'
		}
	},
	mounted() {
		this.loveHistory()
		console.log(this.title, '标题');
	},
	onUnload() {
		// 在页面卸载时刷新数据
		this.loveHistory()// 调用刷新数据的方法，你需要根据实际情况调用你的数据刷新方法
	},
	methods: {
		toJump(url) {
			if (!url) return
			uni.navigateTo({
				url
			});
		},
		back() {
			uni.navigateBack({
				delta: 1,
				fail(e) {
					console.log(e);
				}
			})
		},
		//获取我的恋爱史
		async loveHistory() {
			const res = await loveHistory({
				'type': this.type,
			}).then(res => {
				console.log('获取我的恋爱史', res);
				this.list = res.data.data
				console.log(this.list);
			});
		},
		more(item) {
			this.ship = item
			console.log(this.ship);
			if (item.state == '0') {
				this.isNow = true  //是否显示解除关系
			} else {
				this.isNow = false
			}
			this.isLock = true
		}
	}
}
</script>
<style lang="scss">
page {
	background: #F6F6F6;
}
</style>
<style lang="scss" scoped>
.container {
	width: 100%;
	padding: 0 30rpx;

	.header {
		padding: 25rpx 0;
		padding-top: 88rpx;
		.book {
			font-weight: bold;
			font-size: 34rpx;
			color: $uni-text-color;
			margin-left: 30rpx;
		}

		.buquan {
			width: 125rpx;
			height: 53rpx;
			line-height: 53rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 26rpx;
			border: 1px solid #888888;
			font-size: 24rpx;
			color: $uni-text-color;
		}
	}

	.wrap {
		padding: 80rpx 0;

		.imgwrap {
			text-align: center;

			.imgicon {
				width: 220rpx;
			}
		}
	}

	.boxWrap {
		margin-bottom: 12rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 1px solid rgba(0, 0, 0, 0.13);
		padding: 36rpx 30rpx;

		.avatar {
			width: 68rpx;
			height: 68rpx;
			flex-shrink: 0;
		}

		.nameWrap {
			padding: 0 20rpx;
			font-weight: 800;
			font-size: 30rpx;
			color: $uni-text-color;
		}

		.codes {
			.imgicon_1 {
				width: 48rpx;
				margin-left: 20rpx;
			}

			.nums {
				font-size: 22rpx;
				color: $uni-text-color;
				line-height: 58rpx;
			}
		}
	}

}
</style>